<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>伪类</title>
  <style>
      a:link {
          /* l v h a 顺序 */
          color: pink;
      }

      a:visited {
          color: #6b7a98;
      }

      a:hover {
          color: #4cb9fc;
      }

      a:active {
          font-size: 30px;
      }

      :root {
          /* 可视窗口默认元素 */
          font-size: 20px;
          font-weight: bold;
      }

      div:empty {
          width: 100px;
          height: 100px;
          background-color: yellow;
      }

      :first-child {

      }

      :first-of-type {
      /*  某类型第一个子元素*/
      }

      li:nth-child(odd) {
      /*  奇数的li*/
      }

      li:nth-last-child(2) {
          /*  倒数第二个li */
      }

      p:first-letter {
          /*首字母*/
          font-size: 50px;
          color: red;
      }
      p:first-line {
          /*首行*/
          color: #bfa;
      }

      p::selection {
          /*选中部分*/
          color: #4cb9fc;
          background-color: white;
      }
  </style>
</head>
<body>
<!--
  伪类: 元素特殊状态下的表现(css样式)
  [状态伪类, 结构伪类, 否定伪类]
-->
<!--1. 状态伪类-->
<a href="https://www.jd.com">京东</a>
<a href="https://www.lilichao.com">李立超老师</a>
<!--2. 结构伪类-->
<!-- :root :empty-->
<div>1</div>
<div></div>
<p>this is p element
  next line </p>
</body>
</html>